import { t } from 'i18next'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import shallow from 'zustand/shallow'
// import { useTvWallStore } from '../store'
import { ErrorContent } from './ErrorContent'
import { Content } from './content'
// import { VolumeModal } from '../VolumeModal'
import { FourScreen } from '../fourScreen'
import { useBoxViewHook } from './hook'
import { Modal } from '@kedacom/react-next'
import { useSinglePollStore } from '@/components/SinglePollModal/store'
import { useMeetingTVWallStore } from '../store'
import SinglePollModal, { SinglePollData } from '../../../components/SinglePollModal'
import AutoVmpDialog from '../AutoVmpDialog'

const BoxView = forwardRef((props: any, ref) => {
	const {
		isFourScreenOpen,
		correct_style,
		update,
		operate_correct_style_info,
		isSinglePollOpen,
		correct_style_operate_box_info,
		isNeedUpdate,
	} = useMeetingTVWallStore(
		(state) => ({
			update: state.update,
			correct_style: state.correct_style,
			isFourScreenOpen: state.isFourScreenOpen,
			operate_correct_style_info: state.operate_correct_style_info,
			isSinglePollOpen: state.isSinglePollOpen,
			correct_style_operate_box_info: state.correct_style_operate_box_info,
			isNeedUpdate: state.isNeedUpdate,
		}),
		shallow
	)
	const correct_style_positions = useMeetingTVWallStore.getState().correct_style_positions
	const [curPollData, setCurPollData] = useState<SinglePollData>({ index: 0, poll: null })
	useEffect(() => {
		if (isSinglePollOpen) {
			let _source = operate_correct_style_info[correct_style]
			let member = _source?.members?.find((v) => v.hdu_id === correct_style_operate_box_info) ?? null
			if (member && member.poll) {
				setCurPollData({ index: 0, poll: member?.poll ?? null })
			} else {
				setCurPollData({ index: 0, poll: null })
			}
		}
	}, [isSinglePollOpen])
	const { handleConfirmSingle } = useBoxViewHook()
	useImperativeHandle(ref, () => ({}))
	return (
		<>
			{correct_style_positions.map((item, index) => {
				if (item.hdu_alias === '') {
					return (
						<ErrorContent
							occupied={false}
							error_type={2}
							index={index}
							key={index}
							position={item}
						></ErrorContent>
					)
				}
				if (!item.online /**HDU不在线*/) {
					return (
						<ErrorContent
							occupied={false}
							error_type={1}
							index={index}
							key={index}
							position={item}
						></ErrorContent>
					)
				}
				if (item.used === 1 /**被占用 */) {
					return (
						<ErrorContent
							occupied={true}
							error_type={3}
							index={index}
							key={index}
							position={item}
						></ErrorContent>
					)
				}
				if (item.used === 255 /**无效状态 */) {
					return (
						<ErrorContent
							occupied={false}
							error_type={5}
							index={index}
							key={index}
							position={item}
						></ErrorContent>
					)
				}
				return <Content boxInfo={item} index={index} isNeedUpdate={isNeedUpdate}></Content>
			})}
			{/*单通道模态框 */}
			<Modal
				open={isSinglePollOpen}
				title={t('单通道轮询')}
				needFooter={false}
				width={850}
				height={612}
				onCancel={() => {
					update({ isSinglePollOpen: false })
					useSinglePollStore.getState().reset()
				}}
			>
				<SinglePollModal
					setOpen={() => {
						update({ isSinglePollOpen: false })
					}}
					data={curPollData}
					okCallBack={(data: SinglePollData) => {
						handleConfirmSingle(data)
					}}
					getPollMembersNum={() => -99999}
				/>
			</Modal>
			{/* 自主多动画/画面合成 */}
			<AutoVmpDialog />
			{/* 四分屏模态框 */}
			<Modal
				width={860}
				height={451}
				open={isFourScreenOpen}
				title={t('四分屏设置')}
				okText={false}
				cancelText={false}
				onCancel={() => {
					update({ isFourScreenOpen: false })
				}}
			>
				<FourScreen></FourScreen>
			</Modal>
		</>
	)
})
export default BoxView
